<template>
  <div class="form">
    <!-- 第一部分 -->
    <!-- <section> -->
      <div class="total">
        <h1>更正商标申请/注册事项申请书</h1>
        <el-form :label-position="right" ref="organization"  :model="organization" label-width="250px" size="mini">
          <el-form-item label="申请人名称 :">
            <span>{{organization.appName}}</span>
          </el-form-item>
          <el-form-item label="申请人地址 :">
            <span>{{organization.busAddress}}</span>
          </el-form-item>
          <el-form-item label="邮政编码 :">
            <span>{{organization.postCode}}</span>
          </el-form-item>
          
          <el-form-item label="联系人 :">
            <span>{{organization.contacts}}</span>
          </el-form-item>
           <el-form-item label="邮箱 :">
            <span>{{organization.email}}</span>
          </el-form-item>
          <el-form-item label="电话 :">
            <span>{{organization.phone}}</span>
          </el-form-item>
          <!-- <el-form-item label="代理机构名称 :">
            <span>{{organization.deptName}}</span>
          </el-form-item> -->
          <el-form-item label="商标申请号/注册号 :">
            <span>{{organization.appCode}}</span>
          </el-form-item>
          <el-form-item label="类别 :">
            <span>{{organization.category}}</span>
          </el-form-item>
          <div class="choice">
            <el-form-item label="需重新制发证书文件 :">
              <!-- <el-checkbox-group v-model="organization.makeStatus">
                <el-checkbox label="1">是</el-checkbox>
                <el-checkbox label="0">否</el-checkbox>
              </el-checkbox-group> -->
              <!-- <el-radio-group v-model="organization.makeStatus">
                <el-radio :label="1" disabled>是</el-radio>
                <el-radio :label="0" disabled>否</el-radio>
              </el-radio-group> -->
              <div>
                <span v-if="organization.makeStatus == '1'"  style="margin-left:0px">是</span>
                <span v-else  style="margin-left:0px">否</span>
              </div>
            </el-form-item>
          </div>
          <el-row>
            <div class="positions">
              <el-form-item label="更正事项 :">
                <span >{{organization.eventCorr}}</span>
              </el-form-item>
            </div>
          </el-row>
          <el-form-item label="营业执照 :" class="busimg-img">
            <imgshow> <img :src="this.mconfig.host+organization.busimg" class="busimgbb" alt />
             </imgshow>
          </el-form-item>
          <el-form-item label="身份证正反面 :" class="idcard-img" v-if="organization.idcardface !== ''">
            <imgshow> <img :src="this.mconfig.host+organization.idcardface" class="idcardbb" alt />
             </imgshow>
           
          </el-form-item>
          <el-form-item label="网上确认书 :" class="busimg-img">
            <imgshow> <img :src="this.mconfig.host+organization.qrfile" class="busimgbb" alt />
             </imgshow>
          </el-form-item>
          <el-form-item label="其他附件 :" class="busimg-img" v-if="organization.otherfile.length > 0">
              <imgshow v-for="item, index in organization.otherfile" :key="index"> <img :src="mconfig.host+item" class="busimgbb" alt />
            </imgshow>
          </el-form-item>
        </el-form>
        
    </div>

      <!-- 盖章 -->
      <!-- <div class="seal">
        <el-row>
          <el-col :span="12" class="seal-container">
            <span>申请人章戳（签字）:</span>
          </el-col>
          <el-col :span="12" class="seal-container">
            <span>代理机构章戳:</span>
          </el-col>
          <el-col :span="12" :offset="12" class="seal-container">
            <span>代理人签字:</span>
          </el-col>
        </el-row>
      </div> -->
    <!-- </section> -->
  </div>
</template>

<script>
import imgshow from '../common/imgshow'
export default {
  components:{
    imgshow
    },
  name: 'Form',
  data() {
    return {
      right: "right",
      organization: {
        // appNameCn: '', // 申请人名称（中文）
        appNameEn: '',  // 申请人名称（英文）
        // appAddr: '', // 申请人地址
        // appAddrEn: '',  // 申请人地址（英文）
        // codePostal: '',  //邮政编码
        contacts: '',  //联系人
        phone: '',  //电话
        busimg:'', // 营业执照
        idcardimg:'',// 身份证
        

        // nameAgen: '', // 代理机构名称
        appCode: '',  // 商标注册号：
        category: '',  // 类别
        makeStatus: '', // 需重新制发证书文件：（1：是 0:否）
        eventCorr: '', // 	更正事项
        appName:"",//申请人名称
        postCode:"",//邮编
        busAddress:"",//申请人地址(中文) 
        appAddEn:"",//申请人地址
        deptName:"", // 代理机构名称

        // // 其他共有人
        // appNameCn1: '', // 申请人1名称（中文）
        // appNameEn1: '',  // 申请人1名称（英文）
        // appAddCn1: '', // 申请人1地址（中文）
        // appAddEn1: '',  // 申请人1地址（英文）

        // appNameCn2: '', // 申请人2名称（中文）
        // appNameEn2: '',  // 申请人2名称（英文）
        // appAddCn2: '', // 申请人2地址（中文）
        // appAddEn2: '',  // 申请人2地址（英文）

      },

      other:{
            appName:"",//申请人名称
            postCode:"",//邮编
            busAddress:"",//申请人地址(中文) 
            appAddEn:"",//申请人地址
            deptName:"", // 代理机构名称
      },

    }
  },

  methods: {
     //接口获取到数据
    interface(e) {
      this.$http
        .get("/trademark/proTCorrection/findByIdDetl", {
          params: { id: e },
        })
        .then((res) => {
            this.organization = res.data.data.data;
            this.organization.otherfile = JSON.parse(this.organization.otherfile);
            this.organization.makeStatus = Number(res.data.data.data.makeStatus);
            // this.other = res.data.data.public;

            // this.organization.busimg=res.data.data.data.busimg;
            // this.organization.busimg=res.data.data.data.busimg.split(",")[0];
            // this.organization.idcardimg=res.data.data.data.idcardimg.split(",")[0];
            // this.organization.idcardface=res.data.data.data.idcardface.split(",")[0];
        });
    },
    
  },

  mounted() {
    this.id = this.$route.query.id;
    this.interface(this.id);
  },
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 模块标题 */
.total {
  width: 1200px;
  /* margin: 0 auto; */

}
.total h1 {
  padding: 30px 0;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
}
.el-form {
  margin-left: 248px;
}
.total div {
  margin-bottom: 0;
}
.choice span {
  margin-left: 50px;
}
.model-title {
  padding: 0 100px;
  text-align: center;
  font-size: 28px;
  color: #666;
  font-weight: 400;
  margin-bottom: 40px;
}
.model-title h4,
.model-title p {
  margin: 10px 0;
}
.model-title > h4 {
  font-size: 28px;
  font-weight: normal;
}
.model-title p {
  font-size: 26px;
}
.seal {
  padding: 0 20px;
}
.seal-container {
  min-height: 150px;
}
/* 签字 */
.signature {
  color: #ccc;
}
</style>
<style lang="css">
.el-radio__input .el-radio__inner {
  border-color: #000;
  background: #fff;
}
/* 选中 */
.el-radio__input.is-checked .el-radio__inner {
  border-color: #666;
  background: #666;
}
.el-radio__inner {
  border-radius: 0;
  color: #000;
}
/* 选中 */
.el-radio__input.is-checked + .el-radio__label {
  color: #000;
}
.busimgbb{
  /* width: 500px; */
  width: 80%;
  margin: 5px;
}
.idcardbb{
  /* width: 350px; */
  display: inline-block;
  margin:5px;
}
</style>